import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import cls from 'classnames'


import './index.scss'

export interface ISkeletonProps {
    row?: number
    title?: boolean
    avatar?: boolean
    loading?: boolean
    animate?: boolean
    avatarSize?: number
    avatarShape?: string
    titleWidth?: string
    rowWidth?: string

}
export const SkeletonEle: React.FC<ISkeletonProps> = ({
    row = 0,
    loading = false,
    animate = false,
    rowWidth = '100%',
    avatar = true,
    avatarSize = 32,
    title = true,
    titleWidth = '40%',
    avatarShape = 'round',
    children
}) => {

    const [isArr, setIsArr] = useState<boolean>(false)
    const [rowArr, setRowArr] = useState<Array<any>>([])


    useEffect(() => {
        setRowArr(Array.from({ length: row }))
    }, [row])

    useEffect(() => {
        setIsArr(Array.isArray(rowWidth))
    }, [rowWidth])
    return (
        <React.Fragment>
            {loading ?
                <View className={cls("xxm-skeleton-ls", {
                    'xxm-skeleton-ls--animate': animate
                })}>
                {
                  avatar && <View
                     className={cls('xxm-skeleton-ls__avatar', `xxm-skeleton-ls__avatar--${avatarShape}`)}
                     style={{
                         width: `${avatarSize}px`,
                         height: `${avatarSize}px`
                     }}
                  />
                }
                <View className='xxm-skeleton-ls__content'>
                   {
                       title &&
                       <View className="xxm-skeleton-ls__title"
                         style={{width: titleWidth}}
                       ></View>
                   }
                   {
                       rowArr.map((_,idx)=>{
                           return (
                               <View key={idx}
                                 className='xxm-skeleton-ls__row'
                                 style={{
                                     width: isArr? rowWidth[idx] : rowWidth
                                 }}
                               > 
                                </View>
                           )
                       })
                   }
                </View>
                </View>
                :
                <View className="xxm-skeleton-ls__content">
                    {children}
                </View>
            }
        </React.Fragment>

    )
}